<template>
  <div>
    <header class="site-header jumbotron">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <h1>请发表对Vue的评论</h1>
          </div>
        </div>
      </div>
    </header>
    <div class="container">
      <add :addComment="addComment"/>
      <List :comments="comments" :deleteComment="deleteComment"/> <!-- 使用标签属性comments传入到子组件中 -->
    </div>
  </div>
</template>

<script>

import Add from './components/Add'
import List from './components/List'

export default {
  name: 'App',
  data () { // 该data在子组件中add、list、item中都会使用到，放在app组件中合适
   return {
     comments: [
       {
         name: 'tom',
         comment: '评论1'
       },
       {
         name: 'cat',
         comment: '评论2'
       },
       {
         name: 'zbk',
         comment: '评论3'
       }
     ]
   }
  },
  components: {
    Add,
    List
  },
  methods: {//注意一般对于data的操作方法都定义在该data组件中
    addComment (comment) {
      this.comments.unshift(comment)// 放入comments之前
    },
    deleteComment (index) {// 逐级向下传递
      this.comments.splice(index, 1)
    }
  }
}
</script>

<style>

</style>
